<template>
  <div class="form-container applymentnew-form">
    <el-form
      label-width="140px"
      size="medium"
      label-position="left"
      status-icon
      :model="formData"
      :rules="rules"
      ref="formData"
    >
      <div class="form-item">
        <div class="form-item-hd">结算账户</div>
        <div class="form-item-bd">
          <el-form-item label="开户名称" class="widthout-tips" prop="bankUserName">
            <el-input v-model="formData.bankUserName" placeholder="开户名称（必填）" clearable></el-input>
          </el-form-item>

          <div class="form-inline">
            <el-form-item label="开户银行" class="widthout-tips" prop="bankType">
              <el-select v-model="formData.bankType" placeholder="请选择" class="full-el-select">
                <el-option
                  v-for="item in bank_list"
                  :key="item.bank_name"
                  :label="item.bank_name"
                  :value="item.bank_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label
              class="widthout-tips"
              prop="otherBankType"
              label-width="0px"
              v-if="formData.bankType === '其他'"
            >
              <el-input v-model="formData.otherBankType" placeholder="请输入开户银行" clearable></el-input>
            </el-form-item>
          </div>

          <div class="bank-select-area-box">
            <div class="bank-area-form-item">
              <el-form-item label="开户支行" prop="bankProvince">
                <el-select placeholder="省份" v-model="formData.bankProvince" @change="getAreaLv2">
                  <el-option
                    v-for="(item, index) in areaOpt.provinceList"
                    :label="item.localName"
                    :value="item.pkAreaId"
                    :key="item.pkAreaId"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label label-width="15px" prop="bank_city">
                <el-select placeholder="城市" v-model="formData.bank_city">
                  <el-option
                    v-for="(item, index) in areaOpt.cityList"
                    :label="item.localName"
                    :value="item.pkAreaId"
                    :key="item.pkAreaId"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label label-width="15px" prop="bankBranchName">
                <el-input v-model="formData.bankBranchName" placeholder="开户支行" clearable></el-input>
              </el-form-item>
            </div>

            <p class="form-item-tips">如果找不到所在城市，请选择所在地区或者上级城市</p>
          </div>

          <el-form-item label="银行账号" class="widthout-tips" prop="bankNumber">
            <div class="bank-num-block">
              <el-input v-model="formData.bankNumber" placeholder="基本户银行账号（必填）" clearable></el-input>
              <a
                class="gapl"
                target="_blank"
                href="http://kf.qq.com/faq/140225MveaUz150819mYFjuE.html"
              >常用银行账号位数参考</a>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <div class="action-box applymentnew">
      <el-button type="primary" size="medium" plain @click="goBackSetp">上一步</el-button>
      <el-button type="primary" size="medium" @click="goNextStep">保存并下一步</el-button>
    </div>
  </div>
</template>

<script>
import common from "@/mixins/common.js";
import { bank_list } from "./opts";
export default {
  name: "bankAccount",
  mixins: [common],
  props: ["oldBankAccountInfo"],
  data() {
    return {
      bank_list,
      formData: {
        bankUserName: "",
        bankNumber: "",
        bankBranchName: "",
        bankType: "",
        otherBankType: "",
        bankProvince: "",
        bank_city: "",
        bankCityCode: "",
        bankCity: []
      },
      rules: {
        bankUserName: [
          { required: true, message: "开户名称不能为空", trigger: "blur" }
        ],
        bankNumber: [
          { required: true, message: "银行账号不能为空", trigger: "blur" }
        ],
        bankBranchName: [
          { required: true, message: "开户支行不能为空", trigger: "blur" }
        ],
        bankType: [
          { required: true, message: "请选择开户银行", trigger: "change" }
        ],
        otherBankType: [
          { required: true, message: "请填写开户银行", trigger: "blur" }
        ],
        bankProvince: [
          { required: true, message: "请选择开户省份", trigger: "change" }
        ],
        bank_city: [
          { required: true, message: "请选择开户城市", trigger: "change" }
        ]
      },
      areaOpt: {
        provinceList: [],
        cityList: []
      }
    };
  },
  created() {
    this.getAreaLv1();
    if (this.oldBankAccountInfo) {
      this.formData = this.oldBankAccountInfo;
      this.getInitArea2(this.formData.bankProvince);
    }
  },
  methods: {
    getAreaLv1() {
      API.fetchGet("/operatorPark/getAreaByFatherID", {
        fatherID: 0
      }).then(res => {
        if (res.data) {
          this.areaOpt.provinceList = res.data;
        }
      });
    },
    getAreaLv2(val) {
      this.formData.bank_city = "";
      API.fetchGet("/operatorPark/getAreaByFatherID", {
        fatherID: val
      }).then(res => {
        this.areaOpt.cityList = res.data;
      });
    },
    getInitArea2(val) {
      API.fetchGet("/operatorPark/getAreaByFatherID", {
        fatherID: val
      }).then(res => {
        this.areaOpt.cityList = res.data;
      });
    },
    setProvinceDesc(val) {
      this.formData.bankCity[0] = this.areaOpt.provinceList.find(
        item => item.pkAreaId === val
      ).localName;
    },
    setCityDesc(val) {
      this.formData.bankCity[1] = this.areaOpt.cityList.find(
        item => item.pkAreaId === val
      ).localName;
    },
    goBackSetp() {
      this.$emit("setFormData", "bankAccountInfo", this.formData);
      this.$emit("goBackSetp");
    },
    goNextStep() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          this.setProvinceDesc(this.formData.bankProvince);
          this.setCityDesc(this.formData.bank_city);
          this.$emit("setFormData", "bankAccountInfo", this.formData);
          this.$emit("goNextStep");
        } else {
          return false;
        }
      });
    }
  },
  watch: {
    oldBankAccountInfo() {
      if (this.oldBankAccountInfo) {
        this.formData.bankAccountInfo = this.oldBankAccountInfo;
        this.getInitArea2(this.formData.bankProvince);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "./common.less";
.bank-num-block {
  width: 320px;
  position: relative;
  .gapl {
    position: absolute;
    left: 105%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #5995d8;
    width: 200px;
    &:hover {
      text-decoration: underline;
    }
  }
}
.bank-select-area-box {
  position: relative;
  .bank-area-form-item {
    display: flex;
  }
}

.form-inline {
  display: flex;
  .el-form-item {
    &:last-child {
      margin-left: 10px;
    }
  }
}
</style>
